<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="450" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Style
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.font = "bold 20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// Helper function for dots
function drawDot(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 3.5, 0, 2 * Math.PI);
    ctx.fill();
}

// --- Coordinates ---
const batt_y = 100;
const batt_x_pos = 290;
const batt_x_neg = 310;
const wire_x_right = 500;

const contact_X_x = 150;
const contact_X_y = 150;

const pivot_S_x = 220;
const pivot_S_y = 200;

const cap_A_y = pivot_S_y;

const terminal_Y_x = 100;
const terminal_Y_y = 300;

const cap_B_y = terminal_Y_y;

const cap_plates_x1 = 340;
const cap_plates_x2 = 370;

// Start drawing
ctx.beginPath();

// Battery and top wires
// Positive plate (longer)
ctx.moveTo(batt_x_pos, batt_y - 25);
ctx.lineTo(batt_x_pos, batt_y + 25);
// Negative plate (shorter)
ctx.moveTo(batt_x_neg, batt_y - 15);
ctx.lineTo(batt_x_neg, batt_y + 15);

// Wire from positive terminal to the point above switch contact X
ctx.moveTo(batt_x_pos, batt_y);
ctx.lineTo(contact_X_x, batt_y);
// Wire from negative terminal to the right side of the circuit
ctx.moveTo(batt_x_neg, batt_y);
ctx.lineTo(wire_x_right, batt_y);

// Right vertical wire
ctx.moveTo(wire_x_right, batt_y);
ctx.lineTo(wire_x_right, cap_B_y + 50);

// Switch section
// Vertical wire from the top wire down to switch contact X
ctx.moveTo(contact_X_x, batt_y);
ctx.lineTo(contact_X_x, contact_X_y);
drawDot(contact_X_x, contact_X_y);
ctx.fillText("X", contact_X_x - 20, contact_X_y);

// Switch arm from pivot S to contact X
ctx.moveTo(pivot_S_x, pivot_S_y);
ctx.lineTo(contact_X_x, contact_X_y);
drawDot(pivot_S_x, pivot_S_y);
ctx.fillText("S", pivot_S_x, pivot_S_y + 20);

// Capacitor A section
// Wire from pivot S to capacitor A
ctx.moveTo(pivot_S_x, cap_A_y);
ctx.lineTo(cap_plates_x1, cap_A_y);
// Capacitor A plates
ctx.moveTo(cap_plates_x1, cap_A_y - 30);
ctx.lineTo(cap_plates_x1, cap_A_y + 30);
ctx.moveTo(cap_plates_x2, cap_A_y - 30);
ctx.lineTo(cap_plates_x2, cap_A_y + 30);
// Wire from capacitor A to the right vertical wire
ctx.moveTo(cap_plates_x2, cap_A_y);
ctx.lineTo(wire_x_right, cap_A_y);
drawDot(wire_x_right, cap_A_y);
ctx.fillText("A", (cap_plates_x1 + cap_plates_x2) / 2, cap_A_y - 45);

// Terminal Y and Capacitor B section
drawDot(terminal_Y_x, terminal_Y_y);
ctx.fillText("Y", terminal_Y_x - 20, terminal_Y_y);

// Wire from terminal Y to capacitor B
ctx.moveTo(terminal_Y_x, cap_B_y);
ctx.lineTo(cap_plates_x1, cap_B_y);
// Capacitor B plates
ctx.moveTo(cap_plates_x1, cap_B_y - 30);
ctx.lineTo(cap_plates_x1, cap_B_y + 30);
ctx.moveTo(cap_plates_x2, cap_B_y - 30);
ctx.lineTo(cap_plates_x2, cap_B_y + 30);
// Wire from capacitor B to the right vertical wire
ctx.moveTo(cap_plates_x2, cap_B_y);
ctx.lineTo(wire_x_right, cap_B_y);
ctx.fillText("B", (cap_plates_x1 + cap_plates_x2) / 2, cap_B_y + 45);

// Draw all the paths
ctx.stroke();

// Caption
ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillText("Fig. 5.1", canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>